<template>
  <div ref="stencil">
    <h2>流程组件</h2>
    <div class="node" @mousedown="startDrag" data-type="startEvent">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">开始申请</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
    <div class="margin"></div>
    <div class="node" @mousedown="startDrag" data-type="userTask">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">审批任务</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
    <div class="margin"></div>
    <div class="node" @mousedown="startDrag" data-type="exclusiveGateway">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">排它网关</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
    <div class="margin"></div>
    <div class="node" @mousedown="startDrag" data-type="inclusiveGateway">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">包含网关</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
    <div class="margin"></div>
    <div class="node" @mousedown="startDrag" data-type="parallelGateway">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">并行网关</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
    <div class="margin"></div>
    <div class="node" @mousedown="startDrag" data-type="endEvent">
      <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      <span class="label">结束</span>
      <span class="status">
        <img src='https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ' alt="">
      </span>
    </div>
  </div>
</template>
<script>
import { Graph, Node, Path, Cell, Shape, Addon } from '@antv/x6'
import { uuid } from '@antv/x6/lib/util/string/uuid'
export default {
  name: 'siderDnd',
  data() {
    return {
      dnd: '',
      graph: '',
      visible: true
    }
  },
  mounted() {
    // 初始化 graph
    //this.initGraph()
  },
  methods: {
    initGraph(graph) {
      this.dnd = new Addon.Dnd({
        target: graph,
        scaled: false,
        animation: true,
        dndContainer: this.$refs.stencil,
        validateNode(droppingNode, options) {
          return droppingNode.shape === 'html'
            ? new Promise < boolean > ((resolve) => {
              const { draggingNode, draggingGraph } = options
              const view = draggingGraph.findView(draggingNode)
              const contentElem = view.findOne('foreignObject > body > div')
              Dom.addClass(contentElem, 'validating')
              setTimeout(() => {
                Dom.removeClass(contentElem, 'validating')
                resolve(true)
              }, 3000)
            })
            : true
        },
        getDragNode(node) {
          node = node.clone({ keepId: true })
          return node
        },
        getDropNode(node) {
          // 这里返回一个新的节点作为拖拽节点
          node = node.clone({ keepId: true })
          return node
        }
      })
      this.graph = graph
    },
    createNodeFn(type) {
      if (type === 'startEvent') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'start-event',
          label: '开始申请',
          data: {
            bpmnType: 'startEvent',
            label: '开始申请',
            initiator: 'applyUserId'
          },
          ports: {
            groups: {
              bottom: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 4,
                    magnet:
                      true,
                    stroke: '#C2C8D5',
                    strokeWidth: 1,
                    style: {
                      visibility: 'hidden',
                    },
                    fill: '#fff'
                  }
                }
              }
            },
            items: [
              {
                group: 'bottom' // 指定分组名称
              }
            ]
          },
          attrs: {
            body: {
              rx: 20,
              ry: 26,
            },
          },
        })
      }
      if (type === 'userTask') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'user-task',
          data: {
            bpmnType: 'userTask',
            label: '审批任务',
            candidateGroups: '',
            assignee: ''
          },
          label: '审批任务',
        })
      }
      if (type === 'exclusiveGateway') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'user-task',
          data: {
            bpmnType: 'exclusiveGateway',
            label: '排它网关'
          },
          attrs: {
            body: {
              rx: 6,
              ry: 6,
            },
          },
          label: '排它网关',
        })
      }
      if (type === 'inclusiveGateway') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'user-task',
          data: {
            bpmnType: 'inclusiveGateway',
            label: '包含网关'
          },
          attrs: {
            body: {
              rx: 6,
              ry: 6,
            },
          },
          label: '包含网关',
        })
      }
      if (type === 'parallelGateway') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'user-task',
          data: {
            bpmnType: 'parallelGateway',
            label: '并行网关'
          },
          attrs: {
            body: {
              rx: 6,
              ry: 6,
            },
          },
          label: '并行网关',
        })
      }
      if (type === 'endEvent') {
        return this.graph.createNode({
          id: 'a' + uuid(),
          shape: 'end-event',
          label: '结束',
          data: {
            bpmnType: 'endEvent',
            label: '结束'
          },
          ports: {
            groups: {
              top: {
                position: 'top',
                attrs:
                {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke:
                      '#C2C8D5',
                    strokeWidth: 1,
                    style: {
                      visibility: 'hidden',
                    },
                    fill: '#fff'
                  }
                }
              }
            },
            items: [
              {
                group: 'top' // 指定分组名称
              }
            ]
          },
          attrs: {
            body: {
              rx: 20,
              ry: 26,
            },
          },
        })
      }
    },
    startDrag(e) {
      console.log('startDrag ', e)
      const target = e.currentTarget
      const type = target.getAttribute('data-type')
      const node = this.createNodeFn(type)
      this.dnd.start(node, e)
    }
  }
}
</script>
<style>
#stencil {
  width: 250px;
  height: 100%;
  position: relative;
  background-color: #fff;
  border-right: 1px solid #dfe3e8;
  margin-left: 20px;
}

.x6-widget-stencil {
  background-color: #fff;
}

.x6-widget-stencil-title {
  background-color: #fff;
}

.x6-widget-stencil-group-title {
  background-color: #fff !important;
}

.node {
  display: flex;
  align-items: center;
  width: 180px;
  height: 36px;
  background-color: #fff;
  border: 1px solid #c2c8d5;
  border-left: 4px solid #5F95FF;
  border-radius: 4px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}

.margin {
  height: 20px;
  width: 100%;
}
.node img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 8px;
}

.node .label {
  display: inline-block;
  flex-shrink: 0;
  width: 104px;
  margin-left: 8px;
  color: #666;
  font-size: 12px;
}

.node .status {
  flex-shrink: 0;
}

.x6-node-selected .node {
  border-color: #1890ff;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #d4e8fe;
}

.x6-node-selected .node.success {
  border-color: #52c41a;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #ccecc0;
}

.x6-node-selected .node.failed {
  border-color: #ff4d4f;
  border-radius: 2px;
  box-shadow: 0 0 0 4px #fedcdc;
}

.x6-edge:hover path:nth-child(2) {
  stroke: #1890ff;
  stroke-width: 1px;
}

.x6-edge-selected path:nth-child(2) {
  stroke: #1890ff;
  stroke-width: 1.5px !important;
}

@keyframes running-line {
  to {
    stroke-dashoffset: -1000;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
